<template>
  <a-row style="padding: 15px 0">
    <a-col :span="4">
      <a-select
        ref="select"
        v-model:value="articleParams.cateName"
        style="width: 120px"
        @change="cateChange"
      >
        <a-select-option v-for="item in cateList" :value="item._id">{{
          item.name
        }}</a-select-option>
      </a-select>
    </a-col>
    <a-col :span="8">
      <a-input
        v-model:value="articleParams.author"
        placeholder="请输入作者名字"
      />
    </a-col>
    <a-col :span="8">
      <a-input
        v-model:value="articleParams.title"
        placeholder="请输入文章标题"
      />
    </a-col>
    <a-col :span="4">
      <a-button @click="search" style="float: right">查询</a-button>
    </a-col>
  </a-row>

  <!--    -->
  <a-row style="padding: 15px 0">
    <a-col :span="4">
      <a-button @click="add">增加</a-button>
    </a-col>
  </a-row>

  <a-table :columns="columns" :data-source="articleList" :pagination="false">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'title'">
        <span>
          <smile-outlined />
          标题
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        <a>
          {{ record.name }}
        </a>
      </template>

      <template v-else-if="column.key === 'action'">
        <span>
          <a>修改</a>

          <a>删除</a>
        </span>
      </template>
    </template>
  </a-table>

  <a-pagination
    v-model:current="pagination.current"
    :total="pagination.total"
    @change="tableChange"
  />

  <!--   新增文章的弹窗 -->

  <!--    -->
  <a-modal v-model:visible="visible" @ok="confirm">
    <a-form
      :model="addArticleParams"
      name="basic"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
      autocomplete="off"
    >
      <a-form-item
        label="标题"
        name="title"
        :rules="[{ required: true, message: '请填写标题名' }]"
      >
        <a-input v-model:value="addArticleParams.title" />
      </a-form-item>
      <a-form-item
        label="内容"
        name="content"
        type=""
        :rules="[{ required: true, message: '请填写内容' }]"
      >
        <a-textarea v-model:value="addArticleParams.content" />
      </a-form-item>
      <a-form-item
        label="分类"
        name="cate_id"
        :rules="[{ required: true, message: '请填写内容' }]"
      >
        <a-select
          ref="select"
          v-model:value="addArticleParams.cate_id"
          style="width: 120px"
          @change="addCateChange"
        >
          <a-select-option v-for="item in cateList" :value="item._id">{{
            item.name
          }}</a-select-option>
        </a-select>
      </a-form-item>

      <uploadFile ref="uploadref"></uploadFile>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue'
import { reactive, ref } from 'vue'
import useArticleGet, {
  columns,
  articleList,
  articleParams,
  pagination,
  getArticleList,
  cateList,
  tableChange,
  cateChange,
  search
} from './get'
import type { IchangeArticle } from '@/types/article'
import uploadFile from '@/components/UploadFile.vue'

import { changeArticle } from '@/api/article'

import { useUserStore } from '@/stores'

import { message } from 'ant-design-vue'

const userStore = useUserStore()

useArticleGet()

//
let visible = ref<boolean>(false)

let uploadref = ref<any>(null)

function createArticleParams(): IchangeArticle {
  return reactive({
    article_id: '',
    author: '',
    author_id: '',
    cate_id: '',
    cate_name: '',
    content: '',
    imageSrc: [],
    title: '',
    type: '1' //  1是新增
  })
}

let addArticleParams: any = createArticleParams()

function add() {
  visible.value = true
  addArticleParams.type = '1'
}

const confirm = () => {
  //  免除数据校验

  let imageSrc = uploadref.value.fileList.map((v: any) => {
    return 'http://toutiao.longxiaokj.com/' + v.response.key
  })

  addArticleParams.imageSrc = imageSrc || []
  addArticleParams.author = userStore.userInfo.nickname
  addArticleParams.author_id = userStore.uid

  if (addArticleParams.type == '1') {
    Reflect.deleteProperty(addArticleParams, 'article_id')
  }
  console.log(addArticleParams)
  changeArticle(addArticleParams).then((res: any) => {
    console.log(res)

    if (res.code == 0) {
      message.success('发布成功')

      reset()
    }
  })
}

function reset() {
  addArticleParams = createArticleParams() // 清除数据

  visible.value = false // 关闭弹窗
  uploadref.value.clear()
  getArticleList()
}

//  新增时 的分类改变
const addCateChange = (e: any) => {
  addArticleParams.cate_id = e
  addArticleParams.cate_name = getCateName(e)
}
//   根据id拿到我们的分类名
function getCateName(id: string) {
  let item = (cateList as any).value.find((v: any) => {
    return v._id === id
  })
  return item.name
}
</script>
